<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>发布商机</title>
    <link rel="stylesheet" href="../css/ydui.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <script src="../js/ydui.flexible.js"></script>
</head>

<body>
    <div class="g-view businessinfoPage" id="businessinfoPage">
        <div class="businessinfo-top">
            <h2>{{infoobj.title}}</h2>
            <h6>{{infoobj.updatetime|time}}</h6>
            <p>
                <span class="list-fl">收货地：</span>
                <span class="list-fr">{{infoobj.province_text}}{{infoobj.city_text}}</span>
            </p>
            <p>
                <span class="list-fl">采购量：</span>
                <span class="list-fr" v-text="infoobj.buy_num"></span>
            </p>
            <p>
                <span class="list-fl">联系方式：</span>
                <span class="list-fr">{{infoobj.mobile}}</span>
            </p>
            <p>
                <span class="list-fl">详细地址：</span>
                <span class="list-fr">{{infoobj.area_text}}{{infoobj.address}}</span>
            </p>
            <p>
                <span class="list-fl">商机价格：</span>
                <span class="list-fr">{{infoobj.price}}元</span>
            </p>
        </div>
        <div class="jindu">
            <div class="jindu-wai">
                <div :style="infoobj.widthb" class="jindu-nei"></div>
            </div>
            <p>({{infoobj.shengyujihui}}/{{infoobj.total_num}})</p>
        </div>
        <div class="shengyu">
            <p>剩余{{infoobj.shengyujihui}}次接单机会</p>
            <div v-if="infoobj.isjie" class="businessinfo-btn">
                <button @click="buy(0)" type="button" class="btn-block btn-hollow">买断剩余名额</button>
                <button @click="buy(1)" type="button" class="btn-block btn-primary">立即接单</button>
            </div>
        </div>
        <div class="advice">
            <h4>采购描述</h4>
            <p class="content">{{infoobj.description}}</p>
            <a href="topups.html" class="prompt">小贴士：为方便您快速抢到订单，避免因临时充值错失商机，建议您的账户有相应的余额，实践证明，余额抢单几率更高。【去充值】</a>
            <img src="../icon/advice.png" alt="">
        </div>
        <div v-if="isuserbuy" class="order-record">
            <b class="bus-title">接单记录</b>
            <div class="m-grids-3">
                <a href="javascript:;" class="grids-item">
                    <div class="grids-txt">
                        <span>购买人</span>
                    </div>
                </a>
                <a href="javascript:;" class="grids-item">
                    <div class="grids-txt">
                        <span>购买时间</span>
                    </div>
                </a>
                <a href="javascript:;" class="grids-item">
                    <div class="grids-txt">
                        <span>购买条数</span>
                    </div>
                </a>
                <div v-for="(item, index) in orderRecord" :key="index">
                    <a href="javascript:;" class="grids-item">
                        <div class="grids-txt">
                            <span>{{item.nickname|hides}}</span>
                        </div>
                    </a>
                    <a href="javascript:;" class="grids-item">
                        <div class="grids-txt">
                            <span>{{item.createtime|time}}</span>
                        </div>
                    </a>
                    <a href="javascript:;" class="grids-item">
                        <div class="grids-txt">
                            <span>{{item.goods_num}}条</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="tj-list">
            <b class="bus-title">最新询盘</b>
            <ul>
                <li @click="goinfo(item.id)" v-for="(item, index) in newList" :key="index">
                    <h4>【终端】{{item.title}}</h4>
                    <p class="li-time">{{item.createtime|time}}</p>
                    <div class="li-jindu">
                        <div class="jindu-wai">
                            <div :style="item.widthc" class="jindu-nei"></div>
                        </div>
                        <p>({{item.shengyujihui}}/{{item.total_num}})</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <footer class="m-tabbar tabbar-fixed">
        <a href="../index.html" class="tabbar-item tabbar-active">
            <span class="tabbar-icon">
                <i style="font-size:25px" class="icon iconfont">&#xe617;</i>
            </span>
            <span class="tabbar-txt">询盘商机</span>
        </a>
        <a href="../setup.html" class="tabbar-item">
            <span class="tabbar-icon">
                <i style="font-size:20px" class="icon iconfont">&#xe698;</i>
            </span>
            <span class="tabbar-txt">设置商机</span>
        </a>
        <a href="../release.html" class="tabbar-item">
            <span class="tabbar-icon">
                <i style="font-size:22px" class="icon iconfont">&#xe662;</i>
            </span>
            <span class="tabbar-txt">发布商机</span>
        </a>
        <a href="../vip.html" class="tabbar-item">
            <span class="tabbar-icon">
                <i style="font-size:25px" class="icon iconfont">&#xe67e;</i>
            </span>
            <span class="tabbar-txt">会员中心</span>
        </a>
    </footer>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/ydui.flexible.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/ydui.js"></script>
    <script src="../js/nuoxia.js"></script>
    <script>
        window.onload = function () {
            var token = window.localStorage.getItem("token")
            var indexPage = new Vue({
                el: "#businessinfoPage",
                data: {
                    infoobj: {},
                    widthb: "width:0rem",
                    orderRecord: [],
                    newList: [],
                    isuserbuy: false
                },
                filters: {
                    time: function (value) {
                        return zm.gTime(value * 1000, 6)
                    },
                    hides: function (value) {
                        return value.substr(0, 1) + "**"
                    }
                },
                mounted: function () {
                    this.indexView();
                },
                methods: {
                    indexView: function () {
                        var gps = zm.gParaurl();
                        var id = gps.id;
                        var _this = this;
                        YDUI.dialog.loading.open('加载中');
                        $.ajax({
                            type: "get",
                            url: paraurl + 'api/goods/detail?token=' + token + '&tm=' + tm,
                            data: {
                                ids: id
                            },
                            success: function (data) {
                                if (data.code == 1) {
                                    var infoobj = data.data.detail;
                                    _this.orderRecord = data.data.orderRecord;
                                    if (data.data.orderRecord.length > 0) {
                                        _this.isuserbuy = true;
                                    } else {
                                        _this.isuserbuy = false;
                                    }
                                    var newList = data.data.newList;
                                    for (var i = 0; i < newList.length; i++) {
                                        var widthc = (newList[i].changes_num / newList[i].total_num) * 5;
                                        newList[i].widthc = "width:" + widthc + "rem";
                                    }
                                    _this.newList = newList;
                                    var widthb = (infoobj.changes_num / infoobj.total_num) * 5;
                                    if (widthb == 5) {
                                        infoobj.isjie = false;
                                    } else {
                                        infoobj.isjie = true;
                                    }
                                    infoobj.widthb = "width:" + widthb + "rem";
                                    if (data.data.isBuy == "0") {
                                        infoobj.mobile = "***********";
                                        infoobj.address = "接单后可见";
                                        infoobj.area_text = "";
                                    }
                                    _this.infoobj = infoobj;
                                    YDUI.dialog.loading.close();
                                } else {
                                    YDUI.dialog.alert(data.msg);
                                }
                            }
                        })
                    },
                    buy: function (e) {
                        var gps = zm.gParaurl();
                        var id = gps.id;
                        var _this = this;
                        $.ajax({
                            type: "post",
                            url: paraurl + 'api/order/goodsbuy?token=' + token + '&tm=' + tm,
                            data: {
                                goods_id: id,
                                type: e
                            },
                            success: function (data) {
                                if (data.code == 1) {
                                    _this.indexView();
                                } else if (data.code == 2) {
                                    YDUI.dialog.confirm('余额不足', '去充值', function () {
                                        window.location.href="topups.html"
                                    });
                                } else {
                                    YDUI.dialog.alert(data.msg);
                                }
                            }
                        })
                    },
                    goinfo:function(e){
                        window.location.href = "businessinfo.html?id=" + e
                    }
                }
            })
        }
    </script>
</body>

</html>